<template>
  <div
    :class="{'previewable':previewable}"
    :style="imageStyle"
    class="midea-admin-image">

    <div
      @click="clickOnImage"
      class="mask el-row--flex is-justify-center is-align-middle "
      v-if="previewable"
      v-popover:imgPopover>
      <div class="icon-wrapper">
        <i class="el-icon-zoom-in"/>

      </div>
    </div>

    <el-popover
      placement="right"
      ref="imgPopover"
      trigger="click"
      width="400">
      <img
        :src="url"
        width="100%">
    </el-popover>

  </div>
</template>

<script>
export default {
  name: 'MideaAdminImage',
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    url: {
      type: String,
      default: "'"
    },
    previewable: {
      type: Boolean,
      default: false
    },
    originSize: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      imageUrl: ''
    }
  },

  watch: {
    url (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.imageUrl = ''

        this.loadImage()
      }
    }
  },

  computed: {
    imageStyle () {
      return {

        width: this.width + 'px',
        height: this.height + 'px',
        backgroundImage: this.imageUrl && this.imageUrl.length > 0 ? 'url(' + this.imageUrl + ')' : ''
      }
    }
  },
  mounted () {
    this.loadImage()
  },
  methods: {
    loadImage () {
      // load image Url

      let url = this.originSize ? this.url : this.url.replace('.jpg', '_x.jpg')
      let image = new Image()
      image.onload = () => {
        // console.log('image loaded')
        this.imageUrl = url
      }

      image.src = url
    },
    clickOnImage () {
      if (!this.previewable) {

      }
    }
  }
}
</script>

<style lang="scss" scoped>

    .midea-admin-image {

        background-color: #f2f2f2;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: relative;

        .mask {
            color: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            transition: all 0.2s ease;
            opacity: 0;

        }

        &.previewable {
            cursor: pointer;

            &:hover {
                .mask {
                    opacity: 1;
                }
            }
        }
    }
</style>
